<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>薪资收入报表</title>
    <#include "/common/link.ftl" >

</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl" >

    <#assign currentMenu="salaryDetailReport"/>

    <#include "/common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>薪资收入报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <div style="margin: 10px;">
                    <!--高级查询--->
                    <form class="form-inline" id="searchForm" action="/salary/detail" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label>发放方式</label>
                            <select class="form-control" name="categoryId" id="categoryId">
                                <option value="">全部</option>
                                <#list type as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                            <script>
                                $("#categoryId").val(${qo.categoryId})
                            </script>
                        </div>
                        <div class="form-group">
                            <label>时间段查询:</label>
                            <div class="input-daterange input-group">
                                <input type="text" class="input-sm form-control" id="beginDate" name="beginDate"
                                       value="${(qo.beginDate?string("yyyy-MM-dd HH:mm"))!}"/>
                                <span class="input-group-addon">到</span>
                                <input type="text" class="input-sm form-control" id="endDate" name="endDate"
                                       value="${(qo.endDate?string("yyyy-MM-dd HH:mm"))!}"/>
                            </div>
                        </div>

                        <br/>
                        <br/>

                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" name="condition" id="condition">
                                <option value="year">年份</option>
                                <option value="month">月份</option>
                                <option value="si.title">支付方式</option>
                            </select>
                        </div>

                        <script>
                            $("#condition").val('${qo.condition}')
                        </script>

                        <button type=" submit
                                " class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询
                        </button>
                        <button type="button" class="btn btn-info btn-chart" id="totalB">
                            <span class="glyphicon glyphicon-stats"></span> 总薪资
                        </button>

                        <button type="button" class="btn btn-info btn-chart" id="avgB">
                            <span class="glyphicon glyphicon-stats"></span> 平均薪资
                        </button>

                    </form>
                </div>
                <span data-json='${chart.json}' id="chartData"></span>
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>分组类型</th>
                            <th>总薪资</th>
                            <th>平均薪资</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#list result.list as tmp>
                            <tr>
                                <td>${tmp.cond}</td>
                                <td>${tmp.total?c}</td>
                                <td>${tmp.average?c}</td>
                            </tr>
                        </#list>

                        </tbody>

                    </table>
                    <#include "/common/page.ftl">
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>

<!-- Modal模态框 -->
<div class="modal fade" id="TTT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="padding: 20px">
            <div id="main" style="width: 600px;height:400px;"></div>
        </div>
    </div>
</div>

<!-- Modal模态框 -->
<div class="modal fade" id="AAA" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="padding: 20px">
            <div id="main2" style="width: 600px;height:400px;"></div>
        </div>
    </div>
</div>
<script>
    $('#beginDate,#endDate').datetimepicker({
        format: 'yyyy-mm-dd hh:ss', //格式
        language: 'zh-CN', //中文
        autoclose: true,//选择后自动关闭
        //showMeridian:true, //是否显示上下午
        minView: 0,//精确到哪位
    });
</script>

<script>
    $("#totalB").click(function () {
        var data = $("#chartData").data("json")
        console.log(data);
        var arr = [];

        for (var i = 0; i < data.cond.length; i++) {
            var s = {value: '', name: ''}
            s.value = data.total[i];
            s.name = data.cond[i];
            arr.push(s);
        }
        console.log(arr)

        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: '总薪资饼状图',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: arr,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        $("#TTT").modal("show")
    })

    $("#avgB").click(function () {
        var data = $("#chartData").data("json")
        console.log(data);
        var arr = [];

        for (var i = 0; i < data.cond.length; i++) {
            var s = {value: '', name: ''}
            s.value = data.average[i];
            s.name = data.cond[i];
            arr.push(s);
        }
        console.log(arr)

        var myChart = echarts.init(document.getElementById('main2'));
        option = {
            title: {
                text: '平均薪资饼状图',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: arr,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        $("#AAA").modal("show")
    })
</script>
</body>
</html>